﻿<script setup lang="ts" name="EpButton">
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import useScrollPosition from '@/hooks/scrollPosition'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)
</script>
<template>
  <el-space :size="systemConfig.space" fill>
    <el-row :gutter="systemConfig.space">
      <el-col :md="12" :sm="24" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>基础用法</span>
            </div>
          </template>
          <el-form label-position="right" label-width="100px">
            <el-form-item label="默认按钮">
              <el-button>默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-form-item>
            <el-form-item label="朴素按钮">
              <el-button plain>默认按钮</el-button>
              <el-button type="primary" plain>主要按钮</el-button>
              <el-button type="success" plain>成功按钮</el-button>
              <el-button type="info" plain>信息按钮</el-button>
              <el-button type="warning" plain>警告按钮</el-button>
              <el-button type="danger" plain>危险按钮</el-button>
            </el-form-item>
            <el-form-item label="圆角按钮">
              <el-button round>默认按钮</el-button>
              <el-button type="primary" round>主要按钮</el-button>
              <el-button type="success" round>成功按钮</el-button>
              <el-button type="info" round>信息按钮</el-button>
              <el-button type="warning" round>警告按钮</el-button>
              <el-button type="danger" round>危险按钮</el-button>
            </el-form-item>
            <el-form-item label="圆形图标按钮">
              <el-button icon="Search" circle />
              <el-button type="primary" icon="Edit" circle />
              <el-button type="success" icon="Check" circle />
              <el-button type="info" icon="Message" circle />
              <el-button type="warning" icon="Star" circle />
              <el-button type="danger" icon="Delete" circle />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :md="12" :sm="24" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>禁用状态</span>
            </div>
          </template>
          <el-form label-position="right" label-width="100px">
            <el-form-item label="默认按钮">
              <el-button disabled>默认按钮</el-button>
              <el-button type="primary" disabled>主要按钮</el-button>
              <el-button type="success" disabled>成功按钮</el-button>
              <el-button type="info" disabled>信息按钮</el-button>
              <el-button type="warning" disabled>警告按钮</el-button>
              <el-button type="danger" disabled>危险按钮</el-button>
            </el-form-item>
            <el-form-item label="朴素按钮">
              <el-button plain disabled>默认按钮</el-button>
              <el-button type="primary" plain disabled>主要按钮</el-button>
              <el-button type="success" plain disabled>成功按钮</el-button>
              <el-button type="info" plain disabled>信息按钮</el-button>
              <el-button type="warning" plain disabled>警告按钮</el-button>
              <el-button type="danger" plain disabled>危险按钮</el-button>
            </el-form-item>
            <el-form-item label="圆角按钮">
              <el-button round disabled>默认按钮</el-button>
              <el-button type="primary" round disabled>主要按钮</el-button>
              <el-button type="success" round disabled>成功按钮</el-button>
              <el-button type="info" round disabled>信息按钮</el-button>
              <el-button type="warning" round disabled>警告按钮</el-button>
              <el-button type="danger" round disabled>危险按钮</el-button>
            </el-form-item>
            <el-form-item label="圆形图标按钮">
              <el-button icon="Search" circle disabled />
              <el-button type="primary" icon="Edit" circle disabled />
              <el-button type="success" icon="Check" circle disabled />
              <el-button type="info" icon="Message" circle disabled />
              <el-button type="warning" icon="Star" circle disabled />
              <el-button type="danger" icon="Delete" circle disabled />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>文字按钮</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button text type="primary">文字按钮</el-button>
              <el-button text type="primary" disabled>文字禁用按钮</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>element plus内置图标按钮</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button type="primary" icon="Edit" />
              <el-button type="primary" icon="Star" />
              <el-button type="primary" icon="Delete" />
              <el-button type="primary" icon="Search">搜索</el-button>
              <el-button type="primary">
                上传
                <svg-icon class="el-icon--right" icon="ep:upload"></svg-icon>
              </el-button>
              <el-button text icon="Search">图标文字按钮</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>自定义图标按钮</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button type="primary">
                <svg-icon class="el-icon--left" icon="ii:icon-sun"></svg-icon>
                太阳
              </el-button>
              <el-button type="primary">
                月亮
                <svg-icon class="el-icon--right" icon="ii:icon-moon"></svg-icon>
              </el-button>
              <el-button type="primary"><svg-icon icon="ii:icon-sousuo"></svg-icon></el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>按钮组</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button-group>
                <el-button type="primary" icon="ArrowLeft">上一页</el-button>
                <el-button type="primary">
                  下一页
                  <svg-icon class="el-icon--right" icon="ep:arrow-right"></svg-icon>
                </el-button>
              </el-button-group>
              <el-button-group>
                <el-button type="primary" icon="CirclePlus"></el-button>
                <el-button type="primary" icon="Edit"></el-button>
                <el-button type="primary" icon="Delete"></el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>加载中</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button type="primary" loading>加载中</el-button>
              <el-button text loading>加载中</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>各种尺寸的按钮</span>
            </div>
          </template>
          <el-form>
            <el-form-item label="大型按钮">
              <el-button size="large">默认按钮</el-button>
              <el-button size="large" plain>朴素按钮</el-button>
              <el-button size="large" round>圆角按钮</el-button>
              <el-button size="large" icon="Search">图标按钮</el-button>
              <el-button size="large" icon="Search" circle />
            </el-form-item>
            <el-form-item label="默认按钮">
              <el-button>默认按钮</el-button>
              <el-button plain>朴素按钮</el-button>
              <el-button round>圆角按钮</el-button>
              <el-button icon="Search">图标按钮</el-button>
              <el-button icon="Search" circle />
            </el-form-item>
            <el-form-item label="小型按钮">
              <el-button size="small">默认按钮</el-button>
              <el-button size="small" plain>朴素按钮</el-button>
              <el-button size="small" round>圆角按钮</el-button>
              <el-button size="small" icon="Search">图标按钮</el-button>
              <el-button size="small" icon="Search" circle />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>自定义按钮颜色</span>
            </div>
          </template>
          <el-form>
            <el-form-item label="基础用法">
              <el-button color="#626aef" style="color: #ffffff;">默认按钮</el-button>
              <el-button color="#626aef" plain>朴素按钮</el-button>
              <el-button color="#626aef" style="color: #ffffff;" round>圆角按钮</el-button>
              <el-button color="#626aef" style="color: #ffffff;" icon="Search" circle />
            </el-form-item>
            <el-form-item label="禁用状态">
              <el-button color="#626aef" style="color: #ffffff;" disabled>默认按钮</el-button>
              <el-button color="#626aef" plain disabled>朴素按钮</el-button>
              <el-button color="#626aef" style="color: #ffffff;" round disabled>圆角按钮</el-button>
              <el-button color="#626aef" style="color: #ffffff;" icon="Search" circle disabled />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}
</style>
